<!--
    A playing card element
-->
<polymer-element name="card-card" constructor="Card" attributes="value suit faceup flippable animatedflip originx originy" touch-action="none">
  <template>
  <link rel="stylesheet" href="card.css">  
  <link rel="stylesheet" href="svgbg/cardbg.css">  
    <div id="card">
      <div id="contents" pseudo="x-contents">
        <div id="face">
          <div class="facecontents"></div>
        </div>
        <div id="back"><div class="backcontents"></div></div>
      </div>
    </div>
  </template>
  <script>
        Polymer('card-card', {
            faceup: true,
            flippable: true,
            animatedFlip: true,
            originx:50,
            originy:50,
            value:1,
            suit:'spades',
            created: function() {
              // TODO(doughtie):any other init needed
            },
            suitChanged: function() {
                var face = this.$.face;
                face.style.color = colors[this.suit];
                this.pip = pips[this.suit];
                this.updateValsuit();
            },
            valueChanged: function() {
                this.valueString = valueStrings[this.value];
                this.updateValsuit();
           },
           updateValsuit: function() {
             if (!(this.suit && this.valueString)) {
               return; // not ready yet
             }
             this.$.card.classList.remove(this.valsuit);
             this.valsuit = this.suit + this.valueString;
             this.$.card.classList.add(this.valsuit);
            },
            faceupChanged: function() {
                this.$.card.classList.toggle('flip');
            },
            flip: function() {
                if (!this.flippable) {return;}
                this.faceup = !this.faceup;
            },
        });
        var valueStrings = ['JK', 'A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
        var pips = {
            diamonds: '\u2666',
            hearts: '\u2665',
            clubs: '\u2663',
            spades: '\u2660',
        };
        var colors = {
            diamonds: 'red',
            hearts: 'red',
            clubs: 'black',
            spades: 'black',
        };
  </script>
</polymer-element>
